<template>

<div>
  <div class="top">
    <el-card class="card1" shadow="naver">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <div>
        <el-row>
          <el-col :span="4">
            <el-input size="small"

                      placeholder="用户名模糊查询"></el-input>

          </el-col>
          <el-col :span="4" :offset="1" >
            <el-select v-model="statucheck"
                       size="small"
                       placeholder="订单状态">
              <el-option v-for="item in statustype"
                         :key="item.id"
                         :label="item.type"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" :offset="1" >
            <el-select v-model="statusendcheck"
                       size="small"
                       placeholder="是否关闭">
              <el-option v-for="item in statusendtype"
                         :key="item.id"
                         :label="item.type"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">

            <el-button size="small" type="primary">查询</el-button>
            <el-button size="small" type="default" >重置</el-button>

          </el-col>
        </el-row>

      </div>
    </el-card>

  </div>
<!--  列表主体-->
  <el-card class="box-card" shadow="never">
    <div class="table">
      <el-table
        :data="backlist"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="#"
          align="center"
          type="index"
          >
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户账号"
          align="center"
          width="200px"
        >
        </el-table-column>
        <el-table-column
          prop="addtime"
          label="申请时间"
          align="center"
          width="200px"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          label="数量/金额"
          align="center"
          width="200px"
        >
          <template slot-scope="scope">
            <div> 数量:{{scope.row.count}}</div>
           <div>金额:{{scope.row.order_price}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="退单状态"
          align="center"
          width="300px"
        >
          <template slot-scope="scope">
            <img src="" alt="">
        <div style="display: flex;justify-content: center">
          <div>
            <img v-show="scope.row.process == 2" style="width: 40px ;height: 40px" src="@/assets/icon/agree.png" alt="">
            <img v-show="scope.row.process == 9" style="width: 40px ;height: 40px" src="@/assets/icon/reject.png" alt="">
          </div>
          <div  v-if="scope.row.process == 2 ">
            <img style="width: 40px ;height: 40px" src="@/assets/icon/ending.png" alt="">
          </div>
        </div>
        <div v-if="scope.row.process == 2 || scope.row.process == 9 ">完成时间:{{scope.row.endtime}}</div>
        <div v-if="scope.row.process == 1">
          <img style="width: 40px ;height: 40px" src="@/assets/icon/pendings.png" alt="">
        </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderId"
          label="订单编号"
          width="200px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          label="操作"
          width="200px"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <el-button type="primary" size="small" @click="goDetail(scope.row.backId)">查看详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </el-card>



</div>
</template>

<script>
import orderbankApi from "@/api/product/orderbank";
export default {
name: "Orderindex",
data(){
return{
  statustype:[
    {
      id:1,
      type:'已付款'
    },
    {
      id:2,
      type:'已发货'
    },
    {
      id:3,
      type:'已收货'
    },
    {
      id:9,
      type:'申请退款'
    }
  ],
  statucheck:"",
  statusendtype:[
    {
      id:0,
      type:'未关闭'
    },
    {
      id:1,
      type:'已关闭'
    },
  ],
  statusendcheck:"",
  backlist:[]

}

},
methods:{
  // 获取列表详情
  getOrder(){
orderbankApi.orderList({
  start:1,
  limit:10
})
    .then(res=>{
      this.backlist = res.data.list
      console.log(this.backlist)

    })
  },
  //查看详情
  goDetail(val){
    console.log(val)
    this.$router.push({
      name:"orderbankdetail",
      params:{id:val}
    })

  }
},
  created(){
  this.getOrder()
  }
}
</script>
<style lang="scss" scoped>
.box-card{
  width: 95%;
  margin: 0 auto;
  margin-top: 30px;
}
</style>
